import Taro from '@tarojs/taro'
import React, { useCallback } from 'react';
import { View, Text, Image } from '@tarojs/components'
import LoginVerifyBtn from '@COMPONENTS/Button/LoginVerifyBtn'
import RedDot from '@COMPONENTS/RedDot'
import withWebLogin from '@HOC/withWebLogin'
import Navigate from '@NAVIGATION/navigateManager'
import { RouterConfigITF } from '@INTERFACES/Profile'
import style from './HorizontalNavItem.module.scss'

interface Props {
  showLogin: () => void,
  data: RouterConfigITF,
}
const HorizontalNavItem : React.FC<Props> = ({ data, showLogin }) => {
  const {
    name, route, source, eventId, num = 0, routeParams = {}, disabledVerify, isYellow
  } = data
  const onNavigateTo = useCallback(
    () => {
      if (!route) {
        Taro.showToast({
          title: '暂未开通'
        })
        return
      }
      Navigate[route]?.(routeParams)
      Taro.tracker.trackEvent(eventId)
    },
    [route, eventId, routeParams]
  )

  return (
    <LoginVerifyBtn
      onClick={onNavigateTo}
      showLogin={showLogin}
      eventId={eventId}
      disabledVerify={disabledVerify}
    >
      <View className={`${style.container} ${isYellow ? style.yellowBg : ''}`}>
        <Text className={style.navText}>{name}</Text>
        <View className={style.navIconView}>
          <Image className={style.navIcon} src={source} />
          {num > 0 && (
            <View className={style.redDotView}>
              <RedDot num={num} />
            </View>
          )}
        </View>
      </View>
    </LoginVerifyBtn>
  )
}

export default withWebLogin(HorizontalNavItem)
